<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <todo-header @on-add="onAdd"/>
    <todo-main :todos="list" />
    <todo-footer/>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import axios from 'axios'
// console.log(axios)
// 基准接口
axios.defaults.baseURL = 'http://liufusong.top:3001'
export default {
  data () {
    return {
      list: []
    }
  },

  created () {
    this.getData()
  },

  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  methods: {
    getData () {
      axios({
        url: '/list',
        method: 'GET'
      }).then(res => {
        console.log(res.data)
        this.list = res.data
      })
    },
    onAdd (e) {
      axios({
        url: '/add',
        method: 'POST',
        data: {
          title: e
        }
      }).then((res) => {
        console.log(res)
        this.getData()
      })
    }
  }
}
</script>

<style scoped lang='less'>

</style>
